<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
@layout("/common/_container.html"){
<style type="text/css">
	#allmap {
		width: 100%;
		height: 400px;
		overflow: hidden;
		font-family:"微软雅黑";
	}
	.anchorBL{display:none;}
	.mask {
		position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
		z-index: 1002; left: 0px;
		opacity:0.5; -moz-opacity:0.5;
	}
	.ztree {height:200px; overflow:auto;}
	.ownpanel-title { float: left; margin-right: 30px; padding-left: 5px; border-left: 5px solid #333; line-height: 15px; font-size:15px; font-family:'宋体';}
	.mypanel-title { float: left; margin-right: 5px; padding-left: 5px; font-size:15px; font-family:Tahoma; font-weight:normal;}
	.ownglyphicon { margin-left: 10px; top: 2px; text-decoration: none; }

	html,body{height:100%;overflow:hidden;}
	.box {
		/*background-color: rgba(200,200,200,0.7);*/
		margin: 0rem;
		padding: 0rem;
		height:100%
	}
	.box:nth-child(2) {
		height: 100%;
		/*background-color: rgba(200,210,230,0.7);*/
	}
	.accordant {
		display: table-row;
	}
	.table {
		width: 100%;
		height:600px;
		display: table;
	}
	.table .accordant {
		display: table-row;
	}
	.table .accordant .box {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	.sex_img{ position: absolute; bottom: 0px; top: -395px; float: left;left:10px;padding: 2px; display: inline;background-color: rgba(0,0,0,0.2); }
	.outer_num_img{ position: absolute; bottom: 0px; top: -275px; float: left;left:10px;padding: 2px; display: inline;background-color: rgba(0,0,0,0.2); }
	.history_num_img{ position: absolute; bottom: 0px;top: -175px;float: left;left:10px;padding: 2px; display: inline;background-color: rgba(0,0,0,0.2); }
	#history_num_line { position: absolute; bottom: 1px; padding: 2px; float: left;left:0; display: inline; width: 260px; height: 150px;background-color: rgba(0,0,0,0.2); }
	#sex_pie { position: absolute; bottom: 1px; top: -400px; float: left;left:0;padding: 2px; display: inline; width: 260px; height: 125px;background-color: rgba(0,0,0,0.2); }
	#outer_num_bar { position: absolute; bottom: 1px; top: -280px; float: left;left:0;padding: 2px; display: inline; width: 260px; height: 150px;background-color: rgba(0,0,0,0.2); }
	#realtime_num_line { position: absolute; bottom: 1px; left:40%;padding: 2px; display: inline; width: 260px; height: 150px;background-color: rgba(0,0,0,0.2); }
	#native_num_line { position: absolute; bottom: 1px; top: -400px; float: right; right:0;padding: 2px; display: inline; width: 260px; height: 125px;background-color: rgba(0,0,0,0.2); }
	#age_pie { position: absolute; bottom: 1px; top: -280px; float: right; right:0;padding: 2px; display: inline; width: 260px; height: 150px;background-color: rgba(0,0,0,0.2); }
	#inner_num_bar { position: absolute; bottom: 1px; float: right; right:0;padding: 2px; display: inline; width: 260px; height: 150px;background-color: rgba(0,0,0,0.2); }
	#viewChar {
		width: 100%;
		height: 100%;
	}
	#time { position: absolute; bottom: 1px; top: -400px;left:35%;padding: 2px; display: inline; width: 500px; height: 100px;color:red ;font-size:25px}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=esCmoRsS0550Qaa9YSI8SqglYh4G0c1g">
</script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js">
</script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<body>
	<div class="row" id="bigScreeningDiv">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<div>
						区域选择:
						<span class="dropdown">
						<a href="javascript:void(0);" data-toggle="dropdown">
							<input type="hidden" id="areaId" value="${areaId}">
							<input type="hidden" id="subAreaId" value="${subAreaId}">
							<span class="text" data-role="label" id="selectArea">${areaName}</span>
							<span class="caret"></span>
						</a>
						<div class="dropdown-menu" style="left: 0;right: auto;">
							<ul data-role="tree" id="areaTree" class="ztree"></ul>
						</div>
					</span>
					<span id="fullscreen" class="dropdown">
                     	全屏
                    </span>
					</div>
				</div>
				<div id="viewChar" class="ibox-content">
						<div id="allmap">
						</div>
				 		<div style="position: relative;">
				 			<div id="sex_pie"></div>
				 			<!-- <div class="sex_img" style="width: 185px; height: 35px; background-image: url(&quot;https://datav.oss-cn-hangzhou.aliyuncs.com/uploads/images/6ac43d2d83702455ade20bcd5fab3591.png&quot;); background-repeat: no-repeat; background-size: 100% 100%;"></div> -->
							<div id="outer_num_bar"></div>
							<div id="history_num_line"></div>
							<div id="realtime_num_line"></div>
							<div id="native_num_line"></div>
							<div id="age_pie"></div>
							<div id="inner_num_bar"></div>
							<div id="time"></div>
						</div>
				</div>
			</div>
		</div>
	</div>
	</body>
	<script>
	var viewFullScreen = document.getElementById("allmap");
	//var demo = window.parent.document.getElementById("iframe0");

	    if (viewFullScreen) {
	        $("#fullscreen").on("click",function(){
	        /*设置重新打开的页面  
            * toolbar 不显示浏览器的工具栏  
            * location 不显示地址字段  
            * menubar 不显示菜单栏  
            * directories 不显示目录添加按钮  
            * scrollbars 窗体中内部超出窗口可视范围时不存在滚动条  
            * */  
            //var win=window.open("bigSrceen.html","_blank","resizable=yes;status=yes;toolbar=no;location=no;menubar=no;directories=no;scrollbars=no;");
            //var win=window.open("map.html","_blank","channelmode=yes,fullscreen=yes,resizable=yes,status=yes,toolbar=no,location=no,menubar=no,directories=no,scrollbars=no");
            var win=window.open("map.html","_blank","fullscreen=yes");
            win.moveTo(0,0);
            win.resizeTo(screen.availWidth,screen.availHeight);//设置新打开窗口的宽、高 
            win.focus();
	        
	        var element = document.getElementById("viewChar");
	        var requestMethod = element.requestFullscreen || element.webkitRequestFullscreen || element.mozRequestFullScreen || element.msRequestFullscreen;
	        //var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
			 if (requestMethod) {
	        //console.log(element.webkitRequestFullscreen);
			 	//requestMethod.call(element);
			 } else if (typeof window.ActiveXObject !== "undefined") {
			 	var wscript = new ActiveXObject("WScript.Shell");
				 if (wscript !== null) {
				  	wscript.SendKeys("{F11}");
				 }
			 }
	        
	            var docElm = document.documentElement;
	            if (docElm.requestFullscreen) {
	                docElm.requestFullscreen();
	            }
	            else if (docElm.msRequestFullscreen) {
	                docElm = document.body; //overwrite the element (for IE)
	                docElm.msRequestFullscreen();
	            }
	            else if (docElm.mozRequestFullScreen) {
	                docElm.mozRequestFullScreen();
	            }
	            else if (docElm.webkitRequestFullScreen) {
	                //docElm.webkitRequestFullScreen();
	            }
	        });
	    };
	    
	//$("#fullscreen").on("click",function(){
	//var element = document.getElementById("allmap");
	/*
	if (element.requestFullscreen) {
	element.requestFullscreen();
	} else if (element.mozRequestFullScreen) {
	element.mozRequestFullScreen();
	} else if (element.webkitRequestFullscreen) {
	element.webkitRequestFullscreen();
	} else if (element.msRequestFullscreen) {
	element.msRequestFullscreen();
	}
	*/
	/*
	if(document.fullscreenElement ||  
	   document.mozFullScreenElement ||  
	   document.webkitFullscreenElement ||  
	   document.msFullscreenElement){  
	    if (document.exitFullscreen) {  
	        document.exitFullscreen();  
	    } else if (document.mozCancelFullScreen) {  
	        document.mozCancelFullScreen();  
	    } else if (document.webkitExitFullscreen) {  
	        document.webkitExitFullscreen();  
	    } else if (document.msExitFullscreen) {  
	        document.msExitFullscreen();  
	    }  
	}else{
	    if (document.documentElement.requestFullscreen) {  
	        document.documentElement.requestFullscreen();  
	    } else if (document.documentElement.mozRequestFullScreen) {  
	        document.documentElement.mozRequestFullScreen();  
	    } else if (document.documentElement.webkitRequestFullscreen) {
	    alert(document.documentElement.webkitRequestFullscreen);
	        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);  
	    } else if (document.body.msRequestFullscreen) {  
	        document.body.msRequestFullscreen();  
	    }  
	}
	*/
	//});
	</script>

	<script src="${ctxPath}/static/modular/bigScreen/bigScreen/bigScreen.js"></script>
	<script src="${ctxPath}/static/js/echarts.js"></script>
	<script src="${ctxPath}/static/modular/bigScreen/bigScreen/bigScreen_echarts.js"></script>
	<script src="${ctxPath}/static/modular/bigScreen/bigScreen/mapv.js"></script>
	@}
